<template>
	<ul>
		<li>id: {{ detail.id }}</li>
		<li>title: {{ detail.title }}</li>
		<li>content: {{ detail.content }}</li>
	</ul>
</template>

<script>
export default {
	name: "DetailComp",
	props: {
		id: {
			type: Number,
			required: true,
		},
		name: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			details: [
				{ id: 1, title: "title001", content: "content001" },
				{ id: 2, title: "title002", content: "content002" },
				{ id: 3, title: "title003", content: "content003" },
			],
		};
	},
	mounted() {
		// Vue.use(VueRouter)给Vue原型对象添加的属性
		console.log(this.$route.params, this.$route.query);
	},
	computed: {
		detail() {
			// 将字符串转换成number
			// const id = +this.$route.params.id;
			const id = +this.id;
			// find找带了返回值就是这个对象
			// 没有找到返回值就是undefined
			return this.details.find((detail) => detail.id === id);
		},
	},
};
</script>

<style></style>
